<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="主体名称"
          clearable
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-credit-goods
          clearable
          filterable
          default-first-option
          v-model="searchDamId"
          @select="name => (params.project_type_name = name)"
          @change="getData()"
          placeholder="产业包名称"
        ></select-credit-goods>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="产业环节"
          clearable
          :options="[
            { value: '种繁' },
            { value: '饲料' },
            { value: '养殖' },
            { value: '屠宰' },
            { value: '加工' },
          ]"
          :props="{ value: 'value', label: 'value' }"
          @change="getData()"
          v-model="params.parent_main_business"
        ></c-select>
      </el-form-item>
      <!-- <el-form-item>
        <c-select placeholder="企业类型"
                  @change="getData()"
                  clearable
                  :options="enumCompanyType"
                  v-model="params['org_class.eq']"></c-select>
      </el-form-item>
      <el-form-item>
        <c-select placeholder="级别"
                  @change="getData()"
                  clearable
                  :options="enumCompanyLevel"
                  v-model="params['lever_type.eq']"></c-select>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:parent="scope">
        <div class="text-truncate" :title="scope.row.parent_main_business">
          {{ scope.row.parent_main_business }}
        </div>
      </template>
      <template v-slot:business="scope">
        <div class="text-truncate" :title="scope.row.main_business">
          {{ scope.row.main_business }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="数字档案卡">
          <industry-credit
            :queryId="whiteId"
            :viewMode="viewMode"
            @success="getData(params.index)"
          ></industry-credit>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { mapGetters } from 'vuex'
import { enumProjectStatus, enumCompanyType, enumCompanyLevel } from '@/gov/plugins/enum'
import IndustryCredit from '@/gov/views/files/IndustryCredit'
import SelectCreditGoods from '@/gov/components/select/SelectCreditGoods'
export default {
  components: {
    SelectAddress,
    SelectCreditGoods,
    IndustryCredit,
  },
  data() {
    return {
      enumCompanyType,
      enumCompanyLevel,
      params: {
        index: 1,
        size: 15,
      },
      searchDamId: '',
      order: {
        scale: 'desc',
      },
      tableName: 'project_white_list',
      tableData: [],
      tableColumns: [
        { attrs: { label: '主体名称', prop: 'customer_name', minWidth: 100 } },
        { attrs: { label: '项目地址', prop: 'address', minWidth: 110 } },
        // { attrs: { label: '营业证号', prop: 'register_no', minWidth: 110 } },
        { attrs: { label: '经营者姓名', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '所属产业', prop: 'project_type_name', align: 'center' } },
        {
          attrs: { label: '产业环节', prop: 'parent_main_business', align: 'center' },
          slot: 'parent',
        },
        { attrs: { label: '主营业务', prop: 'main_business' }, slot: 'business' },
        { attrs: { label: '产业规模(万羽、万吨)', prop: 'scale', align: 'center' } },
        // { attrs: { label: '经营年限', prop: 'bussiness_years', align: 'center' } },
        // { attrs: { label: '身份证号码', prop: 'id_card' } },

        // { attrs: { label: '建档时间', prop: 'archive_complete_time' } },

        { attrs: { label: '建档状态', prop: 'projectStatusLabel', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            { content: '档案卡', icon: 'fa fa-file-text', event: this.handleCredit },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      tableCount: 0,
      reportVisible: false,
      whiteId: '',
      loading: false,
      viewMode: false,
    }
  },
  computed: {
    ...mapGetters(['user']),
    queryAddress() {
      return this.user.queryAddressCode
    },
  },
  created() {
    this.params.address_code = this.queryAddress
    this.getData()
  },
  methods: {
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order || {})
      )
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res = {}] = await this.fetchData(this.params)
      const data = res.data || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
      this.loading = false
    },
    dataAdapter(item) {
      item.projectStatusLabel = enumProjectStatus[item.project_status]
      return item
    },
    handleCredit(row) {
      this.whiteId = row ? row.project_white_list_id : ''
      this.viewMode = false
      this.reportVisible = true
    },
    handleView(row) {
      this.whiteId = row ? row.project_white_list_id : ''
      this.viewMode = true
      this.reportVisible = true
    },
    handleCreditClose() {
      this.reportVisible = false
      if (this.viewMode) {
        return
      }
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped></style>
